<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f66;
        }

        .box button {
            padding: 20px;
        }

        .content {
            width: 100px;
            height: 50px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div id='app'>
        <!-- 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。 -->
        <button v-on:click="count++"> 点击增加1 {{ count }} </button>
        <!-- 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。 -->
        <button @click="add"> 点击增加1 {{ count }} </button>

        <button @click="addNum(100,$event)"> 点击增加100 {{ count }} </button>


        <!-- .self 是将事件指明只有点击自身的时候才会被触发 -->
        <!-- <div class="box" @click.self="boxClick"> -->

        <!-- .capture触发内部事件时，先执行外部事件 -->
        <!-- <div class="box" @click.capture="boxClick"> -->

        <div class="box" @click="boxClick">
            <!-- .stop 是修饰符，该修饰符是用来阻止冒泡用的 -->
            <!-- <button @click.stop="btnClick"> 内部按钮 </button>-->

            <!-- .prevent 是用来阻止默认事件用的 -->
            <!-- <a href="https://www.taobao.com" @click.prevent="btnClick">点击进入百度</a> -->

            <!-- .once 设置该事件只被触发一次 -->
            <!-- <button @click.once="btnClick"> 内部按钮 </button> -->
            <button @click.once="btnClick"> 内部按钮 </button>

        </div>

        <div class="content" @scroll.passive="myScroll">
            “真是太方便了！”前不久，在吉林省辽源市政务大厅市场监管服务窗口，办理营业执照的高女士说，工作人员不仅帮她审核了开办企业的相关手续资料，还协调税务、公安等部门，为其办理了发票申领、免费刻制公章等业务。
        </div>

        <!-- v-once 标记该标签内容只被渲染一次，后期即使有改变也不会再次更新 -->
        <h1 v-once>{{count}}</h1>


        <input type="text" @keyup.enter="submit">
    </div>
</body>
<script>
    const app = Vue.createApp({
        data () {
            return {
                count: 100
            }
        },
        methods: {
            add () {
                // 可以直接获取到 event
                console.log(event);
                this.count++
            },
            addNum (value, e) {
                // 第一种可以直接使用 event 不需要接收
                // 第二种如果需要接收，可以在调用事件的时候传递 $event
                console.log(e);
                this.count += value
            },
            boxClick () {
                console.log('box被调用了');
            },
            btnClick () {
                console.log('btn被调用了');
            },
            myScroll () {
                console.log('滚动了');
            },
            submit () {
                console.log('键盘被点击了');
            }
        },
    })
    app.mount('#app')




    // const obj = {
    //     fn1 () {
    //         console.log('fn1');
    //         return this
    //     },
    //     fn2 () {
    //         console.log('fn2');
    //         return this
    //     }, fn3 () {
    //         console.log('fn3');
    //         return this
    //     }, fn4 () {
    //         console.log('fn4');
    //         return this
    //     }
    // }

    // console.log(obj);
    // obj.fn1().fn2().fn3()

</script>

</html>